<template>
  <div class="home">
    <top class="wow fadeInDown" title="智慧运维视频监控智能分析系统"></top>
    <div class="homeMain">
      <item>
        <div class="pageInner">
          <breadcrumb>
            <el-breadcrumb-item to="/camera/list">摄像头列表</el-breadcrumb-item>
            <el-breadcrumb-item>摄像头添加</el-breadcrumb-item>
          </breadcrumb>
          <div class="logbody searchTop scroll">
            <el-form label-position="left" class="formdata" ref="form" :model="form" label-width="140px">
              <el-form-item class="w50" label="机构">
                <el-select class="w100m" v-model="form.jg" placeholder="请选择">
                  <el-option label="油坊庄" value="shanghai"></el-option>
                  <el-option label="油坊庄1" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="w50" label="摄像头名称">
                <el-input class="w100m" v-model="form.sxt"></el-input>
              </el-form-item>
              <el-form-item class="w50" label="经纬度">
                <el-input class="w100m" v-model="form.jwd"></el-input>
              </el-form-item>
              <el-form-item class="w50" label="高度(米)">
                <el-input v-model="form.gd"></el-input>
              </el-form-item>
              <el-form-item class="w50" label="是否启用">
                <el-input class="w100m" v-model="form.sfqy"></el-input>
              </el-form-item>
              <el-form-item class="w50" label="类型">
                <el-select class="w100m" v-model="form.lx" placeholder="请选择">
                  <el-option label="球机" value="shanghai"></el-option>
                  <el-option label="球机1" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="w50" label="品牌">
                <el-select class="w100m" v-model="form.pp" placeholder="请选择">
                  <el-option label="大华" value="shanghai"></el-option>
                  <el-option label="大华2" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="w50" label="型号">
                <el-input class="w100m" v-model="form.xh"></el-input>
              </el-form-item>
              <el-form-item class="w50" label="IP地址">
                <el-input class="w100m" v-model="form.ip"></el-input>
              </el-form-item>
              <el-form-item class="w50" label="rtap端口">
                <el-input class="w100m" v-model="form.rtap"></el-input>
              </el-form-item>
              <el-form-item class="w50" label="账号">
                <el-input class="w100m" v-model="form.zh"></el-input>
              </el-form-item>
              <el-form-item class="w50" label="密码">
                <el-input class="w100m" v-model="form.mm"></el-input>
              </el-form-item>
              <el-form-item class="w50" label="服务端口">
                <el-input class="w100m" v-model="form.fwdk"></el-input>
              </el-form-item>
              <el-form-item class="w50" label="NVR-IP">
                <el-input class="w100m" v-model="form.nvrip"></el-input>
              </el-form-item>
              <el-form-item class="w50" label="NVR端口">
                <el-input class="w100m" v-model="form.nvrport"></el-input>
              </el-form-item>
              <el-form-item class="w50" label="NVR通道">
                <el-input class="w100m" v-model="form.nvrtd"></el-input>
              </el-form-item>
              <el-form-item class="w50" label="通讯方式">
                <el-select class="w100m" v-model="form.txdz" placeholder="请选择">
                  <el-option label="无线4G" value="shanghai"></el-option>
                  <el-option label="球机1" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="w50" label="切图时间(秒)">
                <el-input class="w100m" v-model="form.qttime"></el-input>
                <span class="qtsj">切图时间影像服务器识效率，建议设置为1~10秒。</span>
              </el-form-item>
              <el-form-item class="w50" label="摄像头描述">
                <el-input class="w100m" v-model="form.sxtms"></el-input>
              </el-form-item>
            </el-form>
            <div class="tijiao">
              <div class="searchBut wow fadeInDown" data-wow-delay="0.4s" @click="submit">
                <span>提交</span>
              </div>
              <div class="searchBut wow fadeInDown" data-wow-delay="0.4s" @click="goback">
                <span>取消</span>
              </div>
            </div>
          </div>
        </div>
      </item>
    </div>
    <videoBg></videoBg>
  </div>
</template>

<script>
import top from "../../../components/top/index.vue";
import videoBg from "@/components/videoBg/index.vue";
import item from "@/components/item2/index.vue";
import WOW from "wow.js";
import {alertLogs, alertLogsExport, cameraList} from "../../../api/api/LargeScreenData.js";
import breadcrumb from "../../../components/breadcrumb/index.vue";
import * as XLSX from 'xlsx';
import {saveAs} from 'file-saver';

export default {
  data() {
    return {
      total: 0,
      list: [],
      page: 1,
      startDate: '',
      endDate: '',
      keyword: '',
      listExport: [],
      organization: '',
      form: {
        jg: '',
        sxt: '',
        jwd: '',
        gd: '',
        sfqy: '',
        lx: '',
        pp: '',
        xh: '',
        ip: '',
        rtap: '',
        zh: '',
        mm: '',
        fwdk: '',
        nvrip: '192.168.1.64',
        nvrport: '',
        nvrtd: '',
        txdz: '',
        qttime: '',
        sxtms: ''
      },
      organizationList: [{
        value: 1,
        label: '机构1'
      }, {
        value: 2,
        label: '机构2'
      },]
    }
  },
  components: {
    top,
    videoBg,
    item,
    breadcrumb
  },
  mounted() {
    var wow = new WOW({
      boxClass: "wow",
      animateClass: "animated",
    });
    wow.init();
  },
  methods: {
    submit() {
      this.$message({
        message: '保存成功',
        type: 'success'
      });
    },
    goback() {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  position: fixed;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
}

.homeMain {
  position: relative;
  width: calc(100% - 60px);
  height: calc(100% - 160px);
  margin-top: 140px;
  display: flex;
  margin-left: 30px;
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;

  .pageInner {
    width: 100%;
    position: relative;
    height: 100%;

    .set {
      font-size: 28px;
      cursor: pointer;
      color: #1ebffd;
    }

    .breadcrumb {
      width: calc(100% - 40px);
      margin-left: 20px;
      position: relative;
      height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    .pageInnerData {
      position: relative;
      width: calc(100% - 40px);
      margin: 10px auto;
      height: calc(100% - 170px);
    }

  }
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  height: 50px;
}

.detail {
  width: 100%;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  img {
    width: 60px;
    height: 60px;
  }
}

.searchTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  margin-left: 20px;
  margin-right: 20px;
  height: 60px;

  .searchl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    color: #82b3db;
    font-size: 14px;

    .searchls {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    .label {
      margin-right: 10px;
      margin-left: 10px;
      font-size: 14px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .label2 {
      margin-right: 10px;
    }
  }

  .searchr {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
}

.searchBut {
  background: url("./assets/butbg.png");
  width: 125px;
  height: 42px;
  margin-left: 10px;
  flex-shrink: 0;
  cursor: pointer;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  span {
    font-size: 14px;
  }
}

.exportBut {
  background: url("./assets/butbg2.png");
  width: 105px;
  height: 42px;
  cursor: pointer;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  margin-bottom: -5px;

  span {
    padding-bottom: 5px;
    font-size: 14px;
  }
}

.logbody {
  width: calc(100% - 60px);
  margin: auto;

  .formdata {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    margin-top: 20px;

    .w50 {
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-right: 10px;
    }

    :deep(.el-form-item__label) {
      color: #82b3db;
      font-size: 14px;
    }
  }
}

.tijiao {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  margin-top: 30px;
  align-content: flex-start;
}
</style>
